<!DOCTYPE html>
<html lang="en">
<head>
    <title>统计分析</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/platform2.css">
    <link rel="stylesheet" href="static/easyui/themes/default/easyui.css">
    <link href="static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="static/easyui/demo/demo.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
    <script type="text/javascript" src="static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="static/css/home.css">
    <link href="static/css/base.css" rel="stylesheet">
    <style>
        .echarts-container {
            display: flex; /* 使 divs 横向排列 */
            justify-content: space-around; /* 平均分配空间 */
        }

        .chart {
            width: 30%; /* 设置每个图表的宽度 */
            height: 400px; /* 设置每个图表的高度 */
        }
    </style>
</head>
<body>
<div id="container">
    <div id="pf-page">
        <div style="margin-bottom:20px" id="bd">
            <div class="center-part">
                <div class="center-items todo">
                    <ul class="work-items clearfix">
                        <li>
                            <div class="work-inner">
                                <div class="work-item green">
                                    <i class="iconfont">&#xe61f;</i>
                                    <span class="num">143576&nbsp;<span class="unit">个</span></span>
                                    <label>文件总数量</label>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="work-inner">
                                <div class="work-item red">
                                    <i class="iconfont">&#xe622;</i>
                                    <span class="num">6364&nbsp;<span class="unit">GB</span></span>
                                    <label>文件总大小</label>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="echarts-container">
                    <div id="chart7" class="chart"></div>
                    <div id="chart1" class="chart"></div>
                    <div id="chart2" class="chart"></div>
                    <div id="chart5" class="chart"></div>

                </div>
                <div class="echarts-container">
                    <div id="chart3" class="chart"></div>
                    <div id="chart4" class="chart"></div>
                    <div id="chart6" class="chart"></div>

                </div>
                <div class="echarts-container">


                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {

        // 文件类型比例
        var option1 = {
            title: {
                text: '文件类型比例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '5%', // 设置图例在右侧的位置
                top: 'center', // 设置图例垂直居中
                data: ['txt', 'word', 'excel', '图片', 'PDF']
            },
            series: [
                {
                    name: '销售量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: 'txt'},
                        {value: 310, name: 'word'},
                        {value: 234, name: 'excel'},
                        {value: 135, name: '图片'},
                        {value: 100, name: 'PDF'}
                    ],
                    label: {
                        formatter: '{b}: {c} ({d}%)', // 显示名称、值和百分比
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('chart1'));
        myChart1.setOption(option1);


        // 每个月的上传数量
        var option2 = {
            title: {
                text: '每月文件上传数量'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [2000, 2300, 3200, 3300, 3300, 3000, 3100, 4000, 4100, 4200, 5000, 5500],
                    type: 'line',
                    smooth: false, // 平滑曲线
                    symbolSize: 10, // 数据点大小
                    lineStyle: {
                        width: 2 // 折线宽度
                    },
                    label: {
                        show: true,
                        position: 'top' // 标签位置
                    }
                }
            ]
        };
        var myChart2 = echarts.init(document.getElementById('chart2'));
        myChart2.setOption(option2);

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);

        // 文件上传排行
        var option3 = {
            title: {
                text: '文件上传数量排行榜',   // 标题文本
                left: 'center'   // 标题对齐方式
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['文件上传数量'],
                show: false
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['张三', '李四', '黄博士', '刘博士', '赵博士', "苏博士", "陈博士"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '上传数量',
                    type: 'bar',
                    data: [1000, 800, 700, 690, 650, 600, 580]
                }
            ]
        };
        var myChart3 = echarts.init(document.getElementById('chart3'));
        myChart3.setOption(option3);

        // 文件下载排行
        var option4 = {
            title: {
                text: '文件下载数量排行榜',   // 标题文本
                left: 'center'   // 标题对齐方式
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['文件下载数量'],
                show: false
            },

            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['张三', '赵博士', "苏博士", "陈博士", '李四', '黄博士', '刘博士']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '上传数量',
                    itemStyle: {
                        color: '#409EFF'
                    },
                    type: 'bar',
                    data: [111, 100, 80, 79, 65, 60, 30]
                }
            ]
        };
        var myChart4 = echarts.init(document.getElementById('chart4'));
        myChart4.setOption(option4);

        var option5 = {
            title: {
                text: '每月文件上传总大小 (GB)'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                type: 'value',
                min: 100,
                max: 1000,
                name: 'GB'
            },
            series: [
                {
                    data: [700, 520, 150, 180, 200, 250, 670, 300, 350, 370, 400, 450],
                    type: 'line',
                    smooth: false,
                    symbolSize: 10,
                    lineStyle: {
                        width: 2
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ]
        };
        var myChart5 = echarts.init(document.getElementById('chart5'));
        myChart5.setOption(option5);

        // 关键词搜索频次
        var option6 = {
            title: {
                text: '关键词搜索频次',   // 标题文本
                left: 'center'   // 标题对齐方式
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['输入次数'],
                show: false
            },

            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['延长油田', '121井', "122井", "调研报告", '安塞油田']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '搜索次数',
                    itemStyle: {
                        color: '#409EFF'
                    },
                    type: 'bar',
                    data: [111, 100, 80, 79, 65, 60, 30]
                }
            ]
        };
        var myChart6 = echarts.init(document.getElementById('chart6'));
        myChart6.setOption(option6);

        // 文件类型比例
        var option7 = {
            title: {
                text: '二级目录文件数量统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '5%', // 设置图例在右侧的位置
                top: 'center', // 设置图例垂直居中
                data: ['txt', 'word', 'excel', '图片', 'PDF']
            },
            series: [
                {
                    name: '文件数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: 'A区块'},
                        {value: 110, name: 'B区块'},
                        {value: 234, name: 'C区块'},
                        {value: 335, name: 'D区块'},
                        {value: 200, name: 'E区块'}
                    ],
                    label: {
                        formatter: '{b}: {c} ({d}%)', // 显示名称、值和百分比
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart7 = echarts.init(document.getElementById('chart7'));
        myChart7.setOption(option7);

    });
</script>
</body>
</html>